<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Meta -->
    <meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
    <meta name="author" content="ruyangit@163.com">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../assets/img/favicon.png">

    <title>Tangdao Responsive Bootstrap 4 Dashboard Template</title>

    <!-- vendor css -->
    <link href="../lib/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../lib/ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="../lib/prismjs/themes/prism-vs.css" rel="stylesheet">

    <!-- Tangdao CSS -->
    <link rel="stylesheet" href="../assets/css/tangdao.css">
    <link rel="stylesheet" href="../assets/css/tangdao.component.css">
    <link rel="stylesheet" href="../assets/css/tangdao.demo.css">
    <link rel="stylesheet" href="../assets/css/skin.gradient.css">

  </head>
  <body class="app-component">
    <div id="offCanvas1" class="off-canvas wd-300">
      <a href="#" class="close"><i data-feather="x"></i></a>

      <div class="pd-25 ht-100p tx-13">
        <h6 class="tx-inverse mg-t-50 mg-b-25">What does royalty free mean?</h6>
        <p class="mg-b-25">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</p>
        <a href="" class="btn btn-primary btn-block">Learn More</a>
      </div>
    </div><!-- off-canvas -->

    <div id="offCanvas2" class="off-canvas off-canvas-overlay wd-300">
      <a href="#" class="close"><i data-feather="x"></i></a>

      <div class="pd-25 ht-100p tx-13">
        <h6 class="tx-inverse mg-t-50 mg-b-25">What does royalty free mean?</h6>
        <p class="mg-b-25">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</p>
        <a href="" class="btn btn-primary btn-block">Learn More</a>
      </div>
    </div><!-- off-canvas -->

    <div id="offCanvas3" class="off-canvas off-canvas-overlay off-canvas-right wd-300">
      <a href="#" class="close"><i data-feather="x"></i></a>

      <div class="pd-25 ht-100p tx-13">
        <h6 class="tx-inverse mg-t-50 mg-b-25">What does royalty free mean?</h6>
        <p class="mg-b-25">Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.</p>
        <a href="" class="btn btn-primary btn-block">Learn More</a>
      </div>
    </div><!-- off-canvas -->

    <div id="offCanvas4" class="off-canvas off-canvas-overlay">

      <div class="off-canvas-header">
        <a href="#" class="df-logo">Tangdao</a>
        <a href="#" class="close"><i data-feather="x"></i></a>
      </div>
      <div class="off-canvas-body pd-25 tx-13">
        <ul class="sidebar-nav mg-b-25">
          <li class="nav-label mg-b-15">Navigation</li>
          <li class="nav-item"><a href="" class="nav-link active"><i data-feather="file-text"></i>Overview</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="package"></i> Orders</a>
            <nav class="nav">
              <a href="#">Manage Orders</a>
              <a href="#">Successful Purchase</a>
              <a href="#">Purchase Cancellation</a>
              <a href="#">Overdue Shipments</a>
            </nav>
          </li>
          <li class="nav-item"><a href="#" class="nav-link"><i data-feather="shopping-bag"></i> Products</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="users"></i> Customers</a>
            <nav class="nav">
              <a href="#">Manage Customers</a>
              <a href="#">New Customers</a>
              <a href="#">Returning Customers</a>
            </nav>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link with-sub"><i data-feather="pie-chart"></i> Reports</a>
            <nav class="nav">
              <a href="#">Acquisition</a>
              <a href="#">Audience</a>
              <a href="#">Behavior</a>
              <a href="#">Conversions</a>
            </nav>
          </li>
          <li class="nav-item"><a href="" class="nav-link"><i data-feather="layers"></i> Integration</a></li>
        </ul>
      </div>
    </div><!-- off-canvas -->

    <div id="offCanvas5" class="off-canvas off-canvas-overlay off-canvas-dark bg-primary">

      <div class="off-canvas-header">
        <a href="#" class="df-logo">Tangdao</a>
        <a href="#" class="close"><i data-feather="x"></i></a>
      </div>
      <div class="off-canvas-body pd-25 tx-13">
        <ul class="sidebar-nav mg-b-25">
          <li class="nav-label mg-b-15">Navigation</li>
          <li class="nav-item"><a href="" class="nav-link active"><i data-feather="file-text"></i>Overview</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="package"></i> Orders</a>
            <nav class="nav">
              <a href="#">Manage Orders</a>
              <a href="#">Successful Purchase</a>
              <a href="#">Purchase Cancellation</a>
              <a href="#">Overdue Shipments</a>
            </nav>
          </li>
          <li class="nav-item"><a href="#" class="nav-link"><i data-feather="shopping-bag"></i> Products</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="users"></i> Customers</a>
            <nav class="nav">
              <a href="#">Manage Customers</a>
              <a href="#">New Customers</a>
              <a href="#">Returning Customers</a>
            </nav>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link with-sub"><i data-feather="pie-chart"></i> Reports</a>
            <nav class="nav">
              <a href="#">Acquisition</a>
              <a href="#">Audience</a>
              <a href="#">Behavior</a>
              <a href="#">Conversions</a>
            </nav>
          </li>
          <li class="nav-item"><a href="" class="nav-link"><i data-feather="layers"></i> Integration</a></li>
        </ul>
      </div>
    </div><!-- off-canvas -->

    <div id="offCanvas6" class="off-canvas off-canvas-overlay off-canvas-dark bg-secondary">

      <div class="off-canvas-header">
        <a href="#" class="df-logo">Tangdao</a>
        <a href="#" class="close"><i data-feather="x"></i></a>
      </div>
      <div class="off-canvas-body pd-25 tx-13">
        <ul class="sidebar-nav mg-b-25">
          <li class="nav-label mg-b-15">Navigation</li>
          <li class="nav-item"><a href="" class="nav-link active"><i data-feather="file-text"></i>Overview</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="package"></i> Orders</a>
            <nav class="nav">
              <a href="#">Manage Orders</a>
              <a href="#">Successful Purchase</a>
              <a href="#">Purchase Cancellation</a>
              <a href="#">Overdue Shipments</a>
            </nav>
          </li>
          <li class="nav-item"><a href="#" class="nav-link"><i data-feather="shopping-bag"></i> Products</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="users"></i> Customers</a>
            <nav class="nav">
              <a href="#">Manage Customers</a>
              <a href="#">New Customers</a>
              <a href="#">Returning Customers</a>
            </nav>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link with-sub"><i data-feather="pie-chart"></i> Reports</a>
            <nav class="nav">
              <a href="#">Acquisition</a>
              <a href="#">Audience</a>
              <a href="#">Behavior</a>
              <a href="#">Conversions</a>
            </nav>
          </li>
          <li class="nav-item"><a href="" class="nav-link"><i data-feather="layers"></i> Integration</a></li>
        </ul>
      </div>
    </div><!-- off-canvas -->

    <div id="offCanvas7" class="off-canvas off-canvas-overlay off-canvas-dark">

      <div class="off-canvas-header">
        <a href="#" class="df-logo">Tangdao</a>
        <a href="#" class="close"><i data-feather="x"></i></a>
      </div>
      <div class="off-canvas-body pd-25 tx-13">
        <ul class="sidebar-nav mg-b-25">
          <li class="nav-label mg-b-15">Navigation</li>
          <li class="nav-item"><a href="" class="nav-link active"><i data-feather="file-text"></i>Overview</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="package"></i> Orders</a>
            <nav class="nav">
              <a href="#">Manage Orders</a>
              <a href="#">Successful Purchase</a>
              <a href="#">Purchase Cancellation</a>
              <a href="#">Overdue Shipments</a>
            </nav>
          </li>
          <li class="nav-item"><a href="#" class="nav-link"><i data-feather="shopping-bag"></i> Products</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="users"></i> Customers</a>
            <nav class="nav">
              <a href="#">Manage Customers</a>
              <a href="#">New Customers</a>
              <a href="#">Returning Customers</a>
            </nav>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link with-sub"><i data-feather="pie-chart"></i> Reports</a>
            <nav class="nav">
              <a href="#">Acquisition</a>
              <a href="#">Audience</a>
              <a href="#">Behavior</a>
              <a href="#">Conversions</a>
            </nav>
          </li>
          <li class="nav-item"><a href="" class="nav-link"><i data-feather="layers"></i> Integration</a></li>
        </ul>
      </div>
    </div><!-- off-canvas -->

    <div id="offCanvas8" class="off-canvas off-canvas-dark off-canvas-overlay">

      <div class="off-canvas-header">
        <a href="#" class="df-logo">Tangdao</a>
        <a href="#" class="close"><i data-feather="x"></i></a>
      </div>
      <div class="off-canvas-body pd-25 tx-13">
        <ul class="sidebar-nav mg-b-25">
          <li class="nav-label mg-b-15">Navigation</li>
          <li class="nav-item"><a href="" class="nav-link active"><i data-feather="file-text"></i>Overview</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="package"></i> Orders</a>
            <nav class="nav">
              <a href="#">Manage Orders</a>
              <a href="#">Successful Purchase</a>
              <a href="#">Purchase Cancellation</a>
              <a href="#">Overdue Shipments</a>
            </nav>
          </li>
          <li class="nav-item"><a href="#" class="nav-link"><i data-feather="shopping-bag"></i> Products</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="users"></i> Customers</a>
            <nav class="nav">
              <a href="#">Manage Customers</a>
              <a href="#">New Customers</a>
              <a href="#">Returning Customers</a>
            </nav>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link with-sub"><i data-feather="pie-chart"></i> Reports</a>
            <nav class="nav">
              <a href="#">Acquisition</a>
              <a href="#">Audience</a>
              <a href="#">Behavior</a>
              <a href="#">Conversions</a>
            </nav>
          </li>
          <li class="nav-item"><a href="" class="nav-link"><i data-feather="layers"></i> Integration</a></li>
        </ul>
      </div>
    </div><!-- off-canvas -->

    <div id="offCanvas9" class="off-canvas off-canvas-reveal off-canvas-overlay off-canvas-dark">

      <div class="off-canvas-header">
        <a href="#" class="df-logo">Tangdao</a>
        <a href="#" class="close"><i data-feather="x"></i></a>
      </div>
      <div class="off-canvas-body pd-25 tx-13">
        <ul class="sidebar-nav mg-b-25">
          <li class="nav-label mg-b-15">Navigation</li>
          <li class="nav-item"><a href="" class="nav-link active"><i data-feather="file-text"></i>Overview</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="package"></i> Orders</a>
            <nav class="nav">
              <a href="#">Manage Orders</a>
              <a href="#">Successful Purchase</a>
              <a href="#">Purchase Cancellation</a>
              <a href="#">Overdue Shipments</a>
            </nav>
          </li>
          <li class="nav-item"><a href="#" class="nav-link"><i data-feather="shopping-bag"></i> Products</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="users"></i> Customers</a>
            <nav class="nav">
              <a href="#">Manage Customers</a>
              <a href="#">New Customers</a>
              <a href="#">Returning Customers</a>
            </nav>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link with-sub"><i data-feather="pie-chart"></i> Reports</a>
            <nav class="nav">
              <a href="#">Acquisition</a>
              <a href="#">Audience</a>
              <a href="#">Behavior</a>
              <a href="#">Conversions</a>
            </nav>
          </li>
          <li class="nav-item"><a href="" class="nav-link"><i data-feather="layers"></i> Integration</a></li>
        </ul>
      </div>
    </div><!-- off-canvas -->

    <div id="offCanvas10" class="off-canvas off-canvas-push off-canvas-overlay off-canvas-dark">

      <div class="off-canvas-header">
        <a href="#" class="df-logo">Tangdao</a>
        <a href="#" class="close"><i data-feather="x"></i></a>
      </div>
      <div class="off-canvas-body pd-25 tx-13">
        <ul class="sidebar-nav mg-b-25">
          <li class="nav-label mg-b-15">Navigation</li>
          <li class="nav-item"><a href="" class="nav-link active"><i data-feather="file-text"></i>Overview</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="package"></i> Orders</a>
            <nav class="nav">
              <a href="#">Manage Orders</a>
              <a href="#">Successful Purchase</a>
              <a href="#">Purchase Cancellation</a>
              <a href="#">Overdue Shipments</a>
            </nav>
          </li>
          <li class="nav-item"><a href="#" class="nav-link"><i data-feather="shopping-bag"></i> Products</a></li>
          <li class="nav-item show">
            <a href="" class="nav-link with-sub"><i data-feather="users"></i> Customers</a>
            <nav class="nav">
              <a href="#">Manage Customers</a>
              <a href="#">New Customers</a>
              <a href="#">Returning Customers</a>
            </nav>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link with-sub"><i data-feather="pie-chart"></i> Reports</a>
            <nav class="nav">
              <a href="#">Acquisition</a>
              <a href="#">Audience</a>
              <a href="#">Behavior</a>
              <a href="#">Conversions</a>
            </nav>
          </li>
          <li class="nav-item"><a href="" class="nav-link"><i data-feather="layers"></i> Integration</a></li>
        </ul>
      </div>
    </div><!-- off-canvas -->

    <div class="off-canvas-pusher">
    <header class="navbar navbar-header navbar-header-fixed">
      <a href="" id="mainMenuOpen" class="burger-menu"><i data-feather="menu"></i></a>
      <a href="" id="componentContentHide" class="burger-menu d-none"><i data-feather="arrow-left"></i></a>
      <div class="navbar-brand">
        <a href="../index.html" class="df-logo">Tangdao<span class="mg-l-5">Design</span></a>
      </div><!-- navbar-brand -->
      <div id="navbarMenu" class="navbar-menu-wrapper">
        <div class="navbar-menu-header">
          <a href="../index.html" class="df-logo">Tangdao<span class="mg-l-5">Design</span></a>
          <a id="mainMenuClose" href=""><i data-feather="x"></i></a>
        </div><!-- navbar-menu-header -->
        <ul class="nav navbar-menu">
          <li class="nav-label pd-l-20 pd-lg-l-25 d-lg-none">Main Navigation</li>
          <li class="nav-item"><a href="../docs.html" class="nav-link"><i data-feather="book-open"></i> 文档</a></li>
          <li class="nav-item active"><a href="../components/index.html" class="nav-link"><i data-feather="box"></i> 组件</a></li>
          <li class="nav-item"><a href="../collections/index.html" class="nav-link"><i data-feather="package"></i> 资源</a></li>
          <li class="nav-item"><a href="../template/index.html" class="nav-link"><i data-feather="layers"></i> 模板</a></li>
        </ul>
      </div><!-- navbar-menu-wrapper -->
      <div class="navbar-right">
        <a href="javascript:;" class="search-link" id="navbarSearch"><i data-feather="search"></i></a>
        <div class="dropdown dropdown-notification mg-l-15-f">
          <a href="javascript:;" class="dropdown-link new-indicator" data-toggle="dropdown">
            <i data-feather="bell"></i>
            <span>2</span>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <div class="dropdown-header">通知</div>
            <a href="" class="dropdown-item">
              <div class="media">
                <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <p>版本更新 <strong>1.0.2</strong> 文档布局调整</p>
                  <span>Mar 15 12:32pm</span>
                </div><!-- media-body -->
              </div><!-- media -->
            </a>
            <a href="" class="dropdown-item">
              <div class="media">
                <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <p>版本更新 <strong>1.0.1</strong> 文档布局调整</p>
                  <span>Mar 15 12:32pm</span>
                </div><!-- media-body -->
              </div><!-- media -->
            </a>
            <a href="" class="dropdown-item">
              <div class="media">
                <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <p>版本更新 <strong>1.0.0</strong> 文档布局调整</p>
                  <span>Mar 15 12:32pm</span>
                </div><!-- media-body -->
              </div><!-- media -->
            </a>
            <div class="dropdown-footer"><a href="">View all Notifications</a></div>
          </div><!-- dropdown-menu -->
        </div><!-- dropdown -->

        <a href="https://gitee.com/ruyangit/tangdao-design" class="mg-l-20"><div class="pd-8 tx-white tx-white-8" ><i data-feather="github" class="wd-20 ht-20"></i></div></a>
      </div><!-- navbar-right -->

      <div class="navbar-search">
        <div class="navbar-search-header">
          <input type="search" class="form-control" placeholder="Type and hit enter to search...">
          <button class="btn"><i data-feather="search"></i></button>
          <a id="navbarSearchClose" href="" class="link-03 mg-l-5 mg-lg-l-10"><i data-feather="x"></i></a>
        </div><!-- navbar-search-header -->
        <div class="navbar-search-body">
          <label class="tx-10 tx-medium tx-uppercase tx-spacing-1 tx-color-03 mg-b-10 d-flex align-items-center">Recent Searches</label>
          <ul class="list-unstyled">
            <li><a href="index.html">modern dashboard</a></li>
            <li><a href="../components/modal.html">modal examples</a></li>
            <li><a href="../components/el-avatar.html">avatar</a></li>
          </ul>
        </div><!-- navbar-search-body -->
      </div><!-- navbar-search -->

    </header><!-- navbar -->

    <div class="component-wrapper">
      <div class="component-navleft">
        <nav class="nav flex-column">
          <a href="#tab-layout" class="nav-link " data-toggle="tab">
            <span data-toggle="tooltip" title="Browse Components" data-placement="right"><i data-feather="layout"></i></span>
          </a>
          <a href="#tab-grid" class="nav-link" data-toggle="tab">
            <span data-toggle="tooltip" title="Grid System" data-placement="right"><i data-feather="grid"></i></span>
          </a>
          <a href="#tab-util" class="nav-link" data-toggle="tab">
            <span data-toggle="tooltip" title="Utilities" data-placement="right"><i data-feather="package"></i></span>
          </a>
          <a href="#tab-element" class="nav-link active" data-toggle="tab">
            <span data-toggle="tooltip" title="UI Elements" data-placement="right"><i data-feather="layers"></i></span>
          </a>
          <a href="#tab-form" class="nav-link" data-toggle="tab">
            <span data-toggle="tooltip" title="Forms" data-placement="right"><i data-feather="inbox"></i></span>
          </a>
          <a href="#tab-chart" class="nav-link" data-toggle="tab">
            <span data-toggle="tooltip" title="Charts" data-placement="right"><i data-feather="pie-chart"></i></span>
          </a>
        </nav>
      </div><!-- component-navleft -->

      <div class="component-sidebar">
        <div class="component-sidebar-header">
          <i data-feather="search"></i>
          <div class="search-form">
            <input type="search" class="form-control" placeholder="Search components">
          </div>
        </div><!-- component-sidebar-header -->
        <div class="component-sidebar-body">
          <div class="tab-content">
            <div id="tab-layout" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media ">
                  <a class="media-body mg-l-10" href="index.html">
                    <h6 class="tx-13 mg-b-3">Introduction</h6>
                    <span class="tx-12">介绍</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="../collections/modals.html">
                    <h6 class="tx-13 mg-b-3">Modals</h6>
                    <span class="tx-12">窗口示例</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-grid" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="grid.html">
                    <h6 class="tx-13 mg-b-3">Grid System</h6>
                    <span class="tx-12">布局、栅格、后台布局</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-util" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="util-animation.html">
                    <h6 class="tx-13 mg-b-3">Animation</h6>
                    <span class="tx-12">动画库</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-background.html">
                    <h6 class="tx-13 mg-b-3">Background</h6>
                    <span class="tx-12">背景、颜色</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-border.html">
                    <h6 class="tx-13 mg-b-3">Border</h6>
                    <span class="tx-12">边线</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-display.html">
                    <h6 class="tx-13 mg-b-3">Display</h6>
                    <span class="tx-12">展示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-divider.html">
                    <h6 class="tx-13 mg-b-3">Divider</h6>
                    <span class="tx-12">分割</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-flex.html">
                    <h6 class="tx-13 mg-b-3">Flex</h6>
                    <span class="tx-12">布局</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-height.html">
                    <h6 class="tx-13 mg-b-3">Height</h6>
                    <span class="tx-12">高度</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-margin.html">
                    <h6 class="tx-13 mg-b-3">Margin</h6>
                    <span class="tx-12">外边距</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-padding.html">
                    <h6 class="tx-13 mg-b-3">Padding</h6>
                    <span class="tx-12">内边距</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-position.html">
                    <h6 class="tx-13 mg-b-3">Position</h6>
                    <span class="tx-12">位置</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-typography.html">
                    <h6 class="tx-13 mg-b-3">Typography</h6>
                    <span class="tx-12">排版</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-width.html">
                    <h6 class="tx-13 mg-b-3">Width</h6>
                    <span class="tx-12">宽度</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="util-extras.html">
                    <h6 class="tx-13 mg-b-3">Extras</h6>
                    <span class="tx-12">扩展</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-element" class="tab-pane fade  active show">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="el-accordion.html">
                    <h6 class="tx-13 mg-b-3">Accordion</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-alerts.html">
                    <h6 class="tx-13 mg-b-3">Alerts</h6>
                    <span class="tx-12">警告提示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-avatar.html">
                    <h6 class="tx-13 mg-b-3">Avatar</h6>
                    <span class="tx-12">头像</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-badge.html">
                    <h6 class="tx-13 mg-b-3">Badge</h6>
                    <span class="tx-12">徽标数</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-breadcrumbs.html">
                    <h6 class="tx-13 mg-b-3">Breadcrumbs</h6>
                    <span class="tx-12">面包屑</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-buttons.html">
                    <h6 class="tx-13 mg-b-3">Buttons</h6>
                    <span class="tx-12">按钮</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-button-groups.html">
                    <h6 class="tx-13 mg-b-3">Button Groups</h6>
                    <span class="tx-12">按钮组</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-cards.html">
                    <h6 class="tx-13 mg-b-3">Cards</h6>
                    <span class="tx-12">卡片</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-carousel.html">
                    <h6 class="tx-13 mg-b-3">Carousel</h6>
                    <span class="tx-12">走马灯</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-collapse.html">
                    <h6 class="tx-13 mg-b-3">Collapse</h6>
                    <span class="tx-12">折叠面板</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-dropdown.html">
                    <h6 class="tx-13 mg-b-3">Dropdown</h6>
                    <span class="tx-12">下拉菜单</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-icons.html">
                    <h6 class="tx-13 mg-b-3">Icons</h6>
                    <span class="tx-12">图表</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-images.html">
                    <h6 class="tx-13 mg-b-3">Images</h6>
                    <span class="tx-12">图片</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-list-group.html">
                    <h6 class="tx-13 mg-b-3">List Group</h6>
                    <span class="tx-12">列表</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-marker.html">
                    <h6 class="tx-13 mg-b-3">Marker</h6>
                    <span class="tx-12">标记</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-media-object.html">
                    <h6 class="tx-13 mg-b-3">Media Object</h6>
                    <span class="tx-12">多媒体</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-modal.html">
                    <h6 class="tx-13 mg-b-3">Modal</h6>
                    <span class="tx-12">对话框</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-navs.html">
                    <h6 class="tx-13 mg-b-3">Navs</h6>
                    <span class="tx-12">导航</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media ">
                  <a class="media-body mg-l-10" href="el-navbar.html">
                    <h6 class="tx-13 mg-b-3">Navbar</h6>
                    <span class="tx-12">导航条</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media active">
                  <a class="media-body mg-l-10" href="el-off-canvas.html">
                    <h6 class="tx-13 mg-b-3">Off-Canvas</h6>
                    <span class="tx-12">抽屉，画布闭合</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-pagination.html">
                    <h6 class="tx-13 mg-b-3">Pagination</h6>
                    <span class="tx-12">分页</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-placeholder.html">
                    <h6 class="tx-13 mg-b-3">Placeholder</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-popovers.html">
                    <h6 class="tx-13 mg-b-3">Popovers</h6>
                    <span class="tx-12">起爆卡片</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-progress.html">
                    <h6 class="tx-13 mg-b-3">Progress</h6>
                    <span class="tx-12">进度条</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-steps.html">
                    <h6 class="tx-13 mg-b-3">Steps</h6>
                    <span class="tx-12">步骤</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-scrollbar.html">
                    <h6 class="tx-13 mg-b-3">Scrollbar</h6>
                    <span class="tx-12">滚动条</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-scrollspy.html">
                    <h6 class="tx-13 mg-b-3">Scrollspy</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-spinners.html">
                    <h6 class="tx-13 mg-b-3">Spinners</h6>
                    <span class="tx-12">加载</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-tab.html">
                    <h6 class="tx-13 mg-b-3">Tab</h6>
                    <span class="tx-12">标签页</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-toast.html">
                    <h6 class="tx-13 mg-b-3">Toast</h6>
                    <span class="tx-12">提示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-tooltips.html">
                    <h6 class="tx-13 mg-b-3">Tooltips</h6>
                    <span class="tx-12">文字提示</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-table-basic.html">
                    <h6 class="tx-13 mg-b-3">Table Basic</h6>
                    <span class="tx-12">基础表格</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="el-table-advanced.html">
                    <h6 class="tx-13 mg-b-3">Table Advanced</h6>
                    <span class="tx-12">高级表格</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-form" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="form-elements.html">
                    <h6 class="tx-13 mg-b-3">Form Elements</h6>
                    <span class="tx-12">表单元素</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-input-group.html">
                    <h6 class="tx-13 mg-b-3">Input Group</h6>
                    <span class="tx-12">输入组</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-input-tags.html">
                    <h6 class="tx-13 mg-b-3">Input Tags</h6>
                    <span class="tx-12">标签</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-input-masks.html">
                    <h6 class="tx-13 mg-b-3">Input Masks</h6>
                    <span class="tx-12">标记</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-layouts.html">
                    <h6 class="tx-13 mg-b-3">Form Layouts</h6>
                    <span class="tx-12">表单布局</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-validation.html">
                    <h6 class="tx-13 mg-b-3">Form Validation</h6>
                    <span class="tx-12">表单验证</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-wizard.html">
                    <h6 class="tx-13 mg-b-3">Form Wizard</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-text-editor.html">
                    <h6 class="tx-13 mg-b-3">Text Editor</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-range-slider.html">
                    <h6 class="tx-13 mg-b-3">Range Slider</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-date-pickers.html">
                    <h6 class="tx-13 mg-b-3">Date Pickers</h6>
                    <span class="tx-12">日期</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-select2.html">
                    <h6 class="tx-13 mg-b-3">Select2</h6>
                    <span class="tx-12">选择框</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="form-search.html">
                    <h6 class="tx-13 mg-b-3">Search</h6>
                    <span class="tx-12">搜索框</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
            <div id="tab-chart" class="tab-pane fade">
              <div class="pd-y-20 pd-x-10 component-list">
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-flot.html">
                    <h6 class="tx-13 mg-b-3">Flot</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-js.html">
                    <h6 class="tx-13 mg-b-3">ChartJS</h6>
                    <span class="tx-12">图表</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-peity.html">
                    <h6 class="tx-13 mg-b-3">Peity</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-sparkline.html">
                    <h6 class="tx-13 mg-b-3">Sparkline</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <a class="media-body mg-l-10" href="chart-morris.html">
                    <h6 class="tx-13 mg-b-3">Morris</h6>
                    <span class="tx-12">--</span>
                  </a><!-- media-body -->
                </div><!-- media -->
              </div><!-- component-list -->
            </div><!-- tab-pane -->
          </div><!-- tab-content -->
        </div><!-- component-sidebar-body -->
      </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
              <li class="breadcrumb-item active" aria-current="page">Off-Canvas</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="df-title">Off-Canvas</h1>
          <p class="df-lead">Documentation and examples of off-canvas sidebar that slides in and out of the screen, which is mostly used as mobile navigations.</p>

          <hr class="mg-y-40">

          <h4 id="section1" class="mg-b-10">Basic Example</h4>
          <p class="mg-b-30">You can put any element to off-canvas sidebar like in the example below.</p>

          <div data-label="Example" class="df-example">
            <a href="#offCanvas1" class="btn btn-secondary off-canvas-menu mn-ht-0">Show Sidebar</a>
          </div><!-- df-example -->
          <pre><code class="language-html">&lt;div class=&quot;off-canvas&quot;&gt;
  &lt;!-- any content goes here --&gt;
&lt;/div&gt;
&lt;div class=&quot;off-canvas-pusher&quot;&gt;
  &lt;a href="#offCanvasMenu" class="btn btn-secondary off-canvas-menu"&gt;Menu&lt;/a&gt;
&lt;/div&gt;</code></pre>
          <pre><code class="language-js">$('.off-canvas-menu').on('click', function(e){
  e.preventDefault();
  var target = $(this).attr('href');
  $(target).addClass('show');
});</code></pre>

          <hr class="mg-y-40">

          <h4 id="section2" class="mg-b-10">With Overlay</h4>
          <p class="mg-b-30">You can enable overlay by adding class <code>.off-canvas-overlay</code> to <code>.off-canvas</code>.</p>

          <div data-label="Example" class="df-example">
            <a href="#offCanvas2" class="btn btn-secondary mn-ht-0 off-canvas-menu">Show Sidebar</a>
          </div><!-- df-example -->
          <pre><code class="language-html">&lt;div class=&quot;off-canvas off-canvas-overlay&quot;&gt;
  &lt;!-- any content goes here --&gt;
&lt;/div&gt;</code></pre>

          <hr class="mg-y-40">

          <h4 id="section3" class="mg-b-10">Flip to Right</h4>
          <p class="mg-b-30">You can flip the sidebar to display in right instead of left by adding class <code>.off-canvas-right</code> to <code>.off-canvas</code>.</p>

          <div data-label="Example" class="df-example">
            <a href="#offCanvas3" class="btn btn-secondary mn-ht-0 off-canvas-menu">Show Sidebar</a>
          </div><!-- df-example -->
          <pre><code class="language-html">&lt;div class=&quot;off-canvas off-canvas-overlay off-canvas-right&quot;&gt;
  &lt;!-- any content goes here --&gt;
&lt;/div&gt;</code></pre>

          <hr class="mg-y-40">

          <h5 id="section4" class="mg-b-10">Nav in Off-Canvas</h5>
          <p class="mg-b-30">An off-canvas can have a navigation added.</p>

          <div data-label="Example" class="df-example">
            <a href="#offCanvas4" class="btn btn-secondary mn-ht-0 off-canvas-menu">Show Sidebar</a>
          </div><!-- df-example -->
          <pre><code class="language-html">&lt;div class=&quot;off-canvas off-canvas-overlay&quot;&gt;
  &lt;div class=&quot;off-canvas-header&quot;&gt;...&lt;/div&gt;
  &lt;div class=&quot;off-canvas-body&quot;&gt;
    &lt;ul class=&quot;nav sidebar-nav&quot;&gt;...&lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

          <hr class="mg-y-40">

          <h5 id="section5" class="mg-b-10">Color &amp; Background</h5>
          <p class="mg-b-30">An off-canvas can have a different background and color by adding some classes.</p>

          <div data-label="Example" class="df-example">
            <a href="#offCanvas5" class="btn btn-primary mn-ht-0 off-canvas-menu is-overlay is-dark" data-color="primary">Primary</a>
            <a href="#offCanvas6" class="btn btn-secondary mn-ht-0 off-canvas-menu is-overlay is-dark" data-color="secondary">Secondary</a>
            <a href="#offCanvas7" class="btn btn-dark mn-ht-0 off-canvas-menu is-overlay is-dark">Dark</a>
          </div><!-- df-example -->
          <pre><code class="language-html">&lt;div class=&quot;off-canvas off-canvas-overlay off-canvas-dark bg-primary&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;off-canvas off-canvas-overlay off-canvas-dark bg-secondary&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;off-canvas off-canvas-overlay off-canvas-dark&quot;&gt;...&lt;/div&gt;</code></pre>

          <hr class="mg-y-40">

          <h4 id="section6" class="mg-b-10">Transition Effect</h4>
          <p class="mg-b-30">An off-canvas can change to different transition effect.</p>

          <div data-label="Example" class="df-example">
            <a href="#offCanvas8" class="btn btn-secondary mn-ht-0 off-canvas-menu is-overlay is-dark">Slide In Left</a>
            <a href="#offCanvas9" class="btn btn-secondary mn-ht-0 off-canvas-menu is-overlay is-dark">Reveal</a>
            <a href="#offCanvas10" class="btn btn-secondary mn-ht-0 off-canvas-menu is-overlay is-dark">Push</a>
          </div><!-- df-example -->
          <pre><code class="language-html">&lt;div class=&quot;off-canvas&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;off-canvas off-canvas-reveal&quot;&gt;...&lt;/div&gt;
&lt;div class=&quot;off-canvas off-canvas-push&quot;&gt;...&lt;/div&gt;</code></pre>

 
<footer class="content-footer">
  <div>
    <span>&copy; 2019 Tangdao Design v1.0.0. </span>
    <span>Made by <a href="http://gitee.com/ruyangit">Ryan</a></span>
  </div>
  <div>
    <nav class="nav">
      <a href="#" class="nav-link">Licenses</a>
      <a href="../change-log.html" class="nav-link">Change Log</a>
      <a href="#" class="nav-link">Get Help</a>
    </nav>
  </div>
</footer><!-- content-footer -->

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Basic Example</a>
            <a href="#section2" class="nav-link">With Overlay</a>
            <a href="#section3" class="nav-link">Flip to Right</a>
            <a href="#section4" class="nav-link">Nav in Off-Canvas</a>
            <a href="#section5" class="nav-link">Color &amp; Background</a>
            <a href="#section6" class="nav-link">Transition Effect</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->

  </div>
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../lib/feather-icons/feather.min.js"></script>
    <script src="../lib/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="../lib/prismjs/prism.js"></script>

    <script src="../assets/js/tangdao.js"></script>
    <script src="../assets/js/tangdao.component.js"></script>

    <script>
      $(function(){
        'use strict'
 
        $('.off-canvas-menu').on('click', function(e){
          e.preventDefault();
          var target = $(this).attr('href');
          $(target).addClass('show');
        });


        $('.off-canvas .close').on('click', function(e){
          e.preventDefault();
          $(this).closest('.off-canvas').removeClass('show');
        })

        $(document).on('click touchstart', function(e){
          e.stopPropagation();

          // closing of sidebar menu when clicking outside of it
          if(!$(e.target).closest('.off-canvas-menu').length) {
            var offCanvas = $(e.target).closest('.off-canvas').length;
            if(!offCanvas) {
              $('.off-canvas.show').removeClass('show');
            }
          }
        });
      });
    </script>
  </body>
</html>
